<template>
	<view class="setpass">
		<HeaderBar title="修改密码" showBack backgroundColor="#F6F6F6" fixed />

		<view class="contentBox">
			<!-- <form @submit="formSubmit" @reset="formReset"> -->
			<view class="form-item">
				<view class="title f28">钱包密码</view>
				<view class="iptStyle pass-ipt">
					<input class="input" password v-model="password" name="input" placeholder="请输入钱包密码"
						placeholder-style="color: #B2B2B2;font-size:24upx" />
				</view>
			</view>
			<view class="form-item">
				<view class="title f28">设置密码</view>
				<view class="iptStyle pass-ipt">
					<input class="input" password v-model="newPassword" name="input" placeholder="密码不少于8位(数字字母符号至少两种)"
						placeholder-style="color: #B2B2B2;font-size:24upx" />
				</view>
				<view class="iptStyle confirm-pass-ipt">
					<input class="input" password v-model="rePassword" name="input" placeholder="确认密码"
						placeholder-style="color: #B2B2B2;font-size:24upx" />
				</view>
			</view>
			<view class="btn">
				<view @tap="confirm">
					确认
				</view>
			</view>
			<!-- </form> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				password: "",
				newPassword: "",
				rePassword: "",
			}
		},
		computed: {
			addressInfo() {
				return this.$store.getters.addressInfo
			}
		},
		methods: {
			validatePassword(password) {
				const hasUpperCase = /[A-Z]/.test(password); // 是否包含大写字母
				const hasLowerCase = /[a-z]/.test(password); // 是否包含小写字母
				const hasNumbers = /\d/.test(password); // 是否包含数字
				const hasSpecialChars = /[!@#$%^&*(),.?":{}|<>]/.test(password); // 是否包含特殊字符
				const hasNoChineseChars = !/[\u4e00-\u9fa5]/.test(password); // 是否不包含汉字

				const conditionsMet = [hasUpperCase, hasLowerCase, hasNumbers, hasSpecialChars].filter(Boolean).length >=
				2;

				return password.length >= 8 && conditionsMet && hasNoChineseChars;
			},

			confirm() {
				if (!this.password) {
					return uni.showToast({
						title: '请输入钱包密码',
						position: "bottom",
						icon: "none",
						duration: 2000
					});
				}
				if (this.password != this.addressInfo.password) {
					return uni.showToast({
						title: '密码有误',
						position: "bottom",
						icon: "none",
						duration: 2000
					});
				}
				if (!this.validatePassword(this.newPassword)) {
					return uni.showToast({
						title: '密码格式有误',
						position: "bottom",
						icon: "none",
						duration: 2000
					});
				}
				if (this.rePassword != this.newPassword) {
					return uni.showToast({
						title: '两次密码不一致',
						position: "bottom",
						icon: "none",
						duration: 2000
					});
				}
				this.$store.dispatch('updatePass', this.newPassword)
				    .then(() => {
						this.$updateWalletInfo()
						uni.showToast({
							title: '修改成功',
							position: "bottom",
							icon: "none",
							duration: 2000
						});
						uni.navigateBack();
				    })
				    .catch(err => {
						
				    });

			},
		}
	}
</script>

<style lang="scss" scoped>
	.setpass {
		width: 100%;
		height: 100vh;
		background: #F6F6F6;
	}

	.contentBox {
		padding: 0 50upx;

		.form-item {
			margin-top: 30upx;

			.title {
				font-size: 30upx;
				color: #3D3D3D;
			}

			.f28 {
				font-size: 28upx;
			}

			.iptStyle {
				border-radius: 20upx;
				background-color: #FFFFFF;

				.input {
					padding: 26upx 24upx;
					font-size: 26upx;
				}
			}

			.name-ipt {
				margin-top: 26upx;
			}

			.pass-ipt {
				margin-top: 26upx;
			}

			.confirm-pass-ipt {
				margin-top: 12upx;
			}

		}



		.mt {
			margin-top: 900upx;
		}

		.btn {
			font-size: 26upx;
			color: #F6F6F6;
			line-height: 88upx;
			background: linear-gradient(180deg, #A9E993 0%, #368321 100%);
			border-radius: 10upx;
			text-align: center;
			margin-top: 100upx;
		}
	}
</style>